<template>
    <div id="accessControl">
        设备编号 <el-input v-model="deviceCode" placeholder="请输入设备编号" style="width: 150px;"></el-input>
        规则名称 <el-input v-model="name" placeholder="请输入规则名称" style="width: 150px;"></el-input>
        创建时间 <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" style="height: 35px;" @click="search(1)"><i class="el-icon-search">搜索</i></el-button>
        <el-button style="height: 35px;" @click="reset"><i class="el-icon-refresh">重置</i></el-button>
        <el-table :data="faceRecordList">
            <el-table-column prop="id" label="ID编号" width="160px"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180px"> </el-table-column>
            <el-table-column prop="recognitionTime" label="刷脸时间" width="180px"> </el-table-column>
            <el-table-column prop="bStatus" label="验证状态" width="180px">
                <template slot-scope="scope">
                    {{ scope.row.bstatus}}
                </template>
            </el-table-column>
            <el-table-column prop="failCode" label="失败代码" width="180px">
            </el-table-column>
            <el-table-column prop="validStatus" label="设备类型" width="180px">
            </el-table-column>
            <el-table-column prop="faceImg" label="抓拍照片" width="180px">
                <template slot-scope="scope">
                    <img :src="encodeURIComponent(path+'/'+scope.row.faceImg)" alt="" width="50px" height="50px">
                </template>
    
                    <!-- <img :src="encodedPath" alt="" width="50px" height="50px"> -->
            
                <!-- <template slot-scope="scope">
                    {{ scope.row.faceImg}}
                </template> -->
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" width="160px"> </el-table-column>
        </el-table>
        <div style="margin-top: 30px;margin-left: 1150px;" v-if="pageCount >= 1">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
                <el-button><span>{{ pageNum }} / {{ pageCount }}</span></el-button>
                <el-button type="primary" @click="nextPage">下一页<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: 'accessControl',
    data() {
        return {
            pageNum: 1,
            pageSize: 5,
            pageCount: '',
            faceRecordList:[],
            path:'../assets/faceInfo',
        }
    },
    created() {
        this.getFaceRecordList(1);
    },
    methods: {
        prevPage() {
            this.pageNum--;
            var pageNum = this.pageNum;
            if (this.pageNum >= 1) {
                this.getFaceRecordList(pageNum);
            } else {
                this.getFaceRecordList(1);
            }
        },
        nextPage() {
            this.pageNum++;
            var pageNum = this.pageNum;
            if (this.pageNum <= this.pageCount) {
                this.getFaceRecordList(pageNum);
            } else {
                this.getFaceRecordList(this.pageCount);
            }
        },
        getFaceRecordList(pageNum){
            this.pageNum = pageNum;
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/faceRecord/getFaceRecordList',
                method: 'post',
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                },
                headers: {
                    'Authorization': Authorization,
                }
            })
                .then(response => {
                    this.faceRecordList = response.data.data.sysFaceRecordList;
                    this.pageCount = response.data.data.pageCount;
                    console.log(this.faceRecordList);
                })
        },
    }
}
</script>